<template>
  <y-dialog v-bind="dialogOptions" ref="dialogRef" @ok="$refs.formRef.submit()" @hide="close">
    <y-form ref="formRef" :options="formOptions" @submit="submit" class="px-12">
      <template #fields="{ data }">
        <div class="">
          <div class="px-4 py-2 bg-[#F8F8F8] border border-b-0 rounded-t-md">
            <vxe-checkbox v-model="selectAll" content="全选" class="w-full"></vxe-checkbox>
          </div>
          <vxe-checkbox-group v-model="data.fields"
            class="!flex gap-3 flex-col !space-x-0 max-h-[300px] overflow-auto px-4 py-2 border rounded-b-md">
            <vxe-checkbox :label="item.dbColumnName" :content="item.dbColumnName + '（' + item.columnNameZh + '）'"
              v-for="item in exportFields" :key="item.columnNameZh"></vxe-checkbox>
          </vxe-checkbox-group>
        </div>
      </template>
    </y-form>
  </y-dialog>
</template>

<script>
import XEUtils from 'xe-utils'
import { exportData, exportItem } from '@/api/public'
import { cloneDeep } from '@/utils'

export default {
  props: {
    exportConfig: {
      type: Object
    }
  },
  data() {
    return {
      // 列表查询表单数据
      listFormData: {},
      // 弹窗配置
      dialogOptions: {
        title: '导出数据',
        loading: false
      },
      // 表单数据
      formData: {
        exportType: 'xlsx',
        headType: 'cnHead',
        module: '',
        fields: []
      },
      formOptions: {
        mounted: ({ data }) => {
          this.formData = data
        },
        span: 22,
        items: [
          {
            field: 'fileName',
            title: '文件名称',
            itemRender: {
              name: 'VxeInput',
              props: {
                autoFoucus: true,
                disabled: true
              }
            }
          },
          {
            field: 'exportType',
            title: '保存类型',
            itemRender: {
              name: 'VxeRadioGroup',
              options: [
                { label: 'xlsx', value: 'xlsx' },
                { label: 'dbf', value: 'dbf' }
              ]
            }
          },
          {
            field: 'headType',
            title: '表头类型',
            itemRender: {
              name: 'VxeRadioGroup',
              options: [
                { label: '中文', value: 'cnHead' },
                { label: '英文', value: 'enHead' }
              ]
            }
          },
          {
            field: 'fields',
            title: '选择字段',
            slots: { default: 'fields' }
          }
        ]
      },
      // 选择字段 - 列表
      exportFields: []
    }
  },
  computed: {
    // 全选绑定值
    selectAll: {
      get() {
        // 返回值为true的条件
        return this.formData.fields.length === this.exportFields.length
      },
      set(res) {
        if (res) {
          this.formData.fields = this.exportFields.map((d) => d.dbColumnName)
        } else {
          this.formData.fields = []
        }
      }
    }
  },
  methods: {
    // 打开弹窗
    async open(listFormData) {
      this.listFormData = listFormData

      this.formData.fileName = this.exportConfig.fileName
      this.formData.module = this.exportConfig.moudle
      this.$refs.dialogRef.open()
      // 设置数据
      this.$nextTick(() => {
        this.$refs.formRef.setData(this.formData)
      })
      await this.setFields()
      this.selectAll = true
    },
    // 关闭弹窗
    close() {
      this.formData = {
        ...this.formData,
        exportType: 'xlsx',
        headType: 'cnHead',
        fields: []
      }
    },
    // 提交
    async submit(data) {
      this.dialogOptions.loading = true
      try {
        // 调用导出接口

        const url = await exportData({
          data,
          listFormData: cloneDeep(this.listFormData)
        })
        window.open(url, '_blank')
        this.dialogOptions.loading = false
        this.close()
      } catch (error) {
        this.dialogOptions.loading = false
      }
    },
    // 设置可选的字段
    async setFields() {
      this.exportFields = await exportItem(this.exportConfig.module)
    }
  }
}
</script>

<style lang="scss" scoped></style>
